<template>
  <div>404</div>
</template>
<script>
export default {
  data() {
    return {
      arrObj: [
        {
          name: '22',
          age: '22'
        },
        {
          name: 'cx',
          other: 'info'
        },
        {
          other: 'info',
          ff: 'gg'
        }
      ]
    };
  },
  mounted() {
    let re = this.setObj(this.arrObj, 'other');
    console.log('re', re);
  },

  methods: {
    // 陈雄 web前端
    // （1）组件间通讯 vue2 vue3 大同小异
    // 父 -子
    //   1 prop 形式  、
    //   2 通过子组件实例 refs 调用子组件方法 参数传值
    //   3 vuex pinain 状态管理 或者本地存储也行
    //   provide inreject
    // 子->父
    //   1 props 形式函数 ，子组件通过调用 props函数 传参 到父组件 实现通信 :propFn="propFn"
    //   2 绑定自定义事件 @receDate="ReEvent"
    //   3 vuex pinain 状态管理 或者本地存储也行
    // （2）路由守卫
    //   根据角色 后端返回路由 使用addrouter()
    //   全局守卫 router.beforeEach
    //   局部守卫  vue2=> beforeRouteEnter  beforeRouteUpdate
    //            vue3=> onBeforeRouteLeave,onBeforeRouteUpdate
    // （3）状态存储、
    //  vuex 使用 commit 触发mutation 、 dispash触发actions
    //  vue3 推荐 pinain   pinain 和vuex 少了mutation
    // (4)axios封装
    // const service = axios.create({
    //   baseURL:'',
    //   ...
    // })
    // 请求拦截
    // service.interceptors.request.use()
    // 响应拦截
    // service.interceptors.response.use
    // (5)环境变量文件
    // .env.development  开发环境配置
    // .env.production  生产环境变量配置
    // (6)实现对象按指定属性分组
    // Object.values()
    // Object.keys()
    // 实现对象按指定属性分组
    // 1假设数据
    // arrObj: [
    //     {
    //       name: '22',
    //       age: '22'
    //     },
    //     {
    //       name: '陈雄',
    //       other: 'info'
    //     },
    //     {
    //       other: 'info',
    //       ff: 'gg'
    //     }
    //   ]
    // 2 调用
    // let re = this.setObj(arrObj, 'name');
    // 3 方法
    // setObj(arrObj, kesValue) {
    //   let newArr = [];
    //   arrObj.forEach((it) => {
    //     if (kesValue in it) {
    //       newArr.push(it);
    //     }
    //   });
    //   return newArr;
    // }
  }
};
</script>

<style lang="scss" scoped></style>
